<template>
	<view class="page">
		<sub-nav></sub-nav>
		<view class="search">
			<u-search placeholder="请输入资源名称" v-model="keyword" @custom="searchStart()" :show-action="true"
				action-text="搜索" :animation="true"></u-search>
		</view>
		<view class="dropwrap" :key="dropKey">
			<u-dropdown class="drop" ref="uDropdown">
				<u-dropdown-item v-model="selections.subject" title="学科" :options="subject_options"></u-dropdown-item>
				<u-dropdown-item v-model="selections.type" title="类型" :options="type_options"></u-dropdown-item>
				<u-dropdown-item v-model="selections.format" title="格式" :options="formats_options"></u-dropdown-item>
				<u-dropdown-item title="排序">
					<view class="sort-slot">
						<view class="sort-name">
							<view class="sort-btn" v-for="item in sortName_options">
								<u-button type="primary" :plain="!item.select" @click="handelSortName(item)">
									{{item.label}}
								</u-button>
							</view>
						</view>
						<view class="sort-type">
							<view class="sort-btn" v-for="item in sort_options">
								<u-button type="primary" :plain="!item.select" @click="handelSort(item)">
									{{item.label}}
									<u-icon :name="item.icon"></u-icon>
								</u-button>
							</view>
						</view>
						<view class="close-btn">
							<u-button type="primary" @click="sortConfirm">
								确认
							</u-button>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="showpage">
			<showResource :select='selections' :resourcelist='showList' :key='showKey'></showResource>
		</view>
		<u-loadmore :status="status" v-if="showList.length != 0" />
		<view class="empty" v-if="showList.length === 0">
			<u-empty text="数据为空" mode="list" icon-size="240" font-size="35"></u-empty>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchObj: {
					name: '',
					type: '',
					format: '',
					subjectList: '',
					sortOP: '',
					sortName: ''
				},
				keyword: '',
				showKey: 0,
				dropKey: 0,
				selections: {
					subject: 1,
					type: 1,
					format: 1,
					sortOptions: 1,
					utilkey: 1
				},
				formats_options: [{
					label: '全部',
					value: 1
				}],
				subject_options: [{
					label: '全部',
					value: 1
				}],
				type_options: [{
					label: '全部',
					value: 1
				}],
				sort_options: [{
					label: '升序',
					value: 1,
					select: false,
					icon: 'arrow-upward',
					name: 'asc'
				}, {
					label: '降序',
					value: 2,
					select: false,
					icon: 'arrow-downward',
					name: 'desc'
				}],
				sortName_options: [{
						label: '默认',
						value: 1,
						select: true
					},
					{
						label: '名称',
						value: 2,
						argv: "name",
						select: false
					},
					{
						label: '创建时间',
						value: 3,
						argv: "createTime",
						select: false
					},
					{
						label: '评分',
						value: 4,
						argv: "grade",
						select: false
					},
					{
						label: '下载量',
						value: 5,
						argv: "downloadCount",
						select: false
					},
					{
						label: '浏览量',
						value: 6,
						argv: "browserCount",
						select: false
					},

				],
				resourcelist: [],
				showList: [],
				num: 10,
				page: 1,
				status: 'loadmore',
				sortName: '',
				sortOp: 'asc'
			}
		},
		methods: {
			searchStart() {
				this.page = 1
				//search:`{"name":"${search.name}","type":"${search.type}","format":"${search.format}","sort":"${search.sort}","sortName":"${search.sortName}"}`
				if (this.keyword === '') {
				} else {
					this.searchObj.name = this.keyword
					this.$api.resourceCenterSearch(this.$store.state.access_token, this.searchObj, this.num, this.page)
						.then(res => {
							this.showList = res.values.records
						})
				}
			},
			handelSortName(item) {
				let selectIndex = item.value - 1
				if (item.select) {
					this.sortName_options[selectIndex].select = false
					this.searchObj.sortName = ''
				} else {
					this.sortName_options[selectIndex].select = true
					this.searchObj.sortName = this.sortName_options[selectIndex].argv
					for (let i in this.sortName_options) {
						if (i != selectIndex) {
							this.sortName_options[i].select = false
						}
					}
				}
			},
			handelSort(item) {
				let selectIndex = item.value - 1
				if (item.select) {
					this.sort_options[selectIndex].select = false
					this.searchObj.sortOP = ''
				} else {
					this.sort_options[selectIndex].select = true
					this.searchObj.sortOP = this.sort_options[selectIndex].name
					for (let i in this.sort_options) {
						if (i != selectIndex) {
							this.sort_options[i].select = false
						}
					}
				}
			},
			sortConfirm() {
				if (this.searchObj.sortName !== '') {	
				} else {
					this.$refs.uToast.show({
						title: '请选择排序字段',
						type: 'warning'
					})
					return
				}
				if (this.searchObj.sortOP !== '') {			
				} else {
					this.$refs.uToast.show({
						title: '请选择排序方式',
						type: 'warning'
					})
					return
				}
				this.page = 1
				this.$api.resourceCenterSearch(this.$store.state.access_token, this.searchObj, this.num, this.page)
					.then(res => {
						console.log(res.values.records);
						this.showList = res.values.records
					})
				this.$refs.uDropdown.close();

			}
		},
		watch: {
			selections: {
				handler(val, oldval) {
					if (val.subject === 1 && val.format === 1 && val.type === 1) {
						this.showList = this.resourcelist
					} else {
						this.showList = []
						this.searchObj.subjectList = ''
						this.searchObj.format = ''
						this.searchObj.type = ''
						if (val.subject !== 1) {
							this.searchObj.subjectList = this.subject_options[val.subject-1].id
						}
						if (val.format !== 1) {
							this.searchObj.format = this.formats_options[val.format-1].label
						}
						if (val.type !== 1) {
							this.searchObj.type = this.type_options[val.type-1].label
						}
						this.page = 1
						console.log(this.searchObj);
						this.$api.resourceCenterSearch(this.$store.state.access_token, this.searchObj, this.num, this.page)
							.then(res => {console.log(res);
								console.log(res.values.records);
								this.showList = res.values.records
							})
					}

					this.showKey += 1
				},
				deep: true
			},
			showList: {
				handler(val, oldval) {
					if (val.length < this.num) {
						//this.status = 'nomore'
					}
				}
			},
		},
		onReady: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.$api.resourceCenterget(this.$store.state.access_token, '')
				.then(res => {
					console.log(res);
					res.values.subjects.forEach((item, index) => {
						this.subject_options[index + 1] = {
							label: item.name,
							value: Number(index + 2),
							id: item.id
						}
					})

					res.values.formats.forEach((item, index) => {
						this.formats_options[index + 1] = {
							label: item.name,
							value: Number(index + 2)
						}
					})

					res.values.types.forEach((item, index) => {
						this.type_options[index + 1] = {
							label: item.name,
							value: Number(index + 2)
						}
					})
					this.dropKey += 1
					return this.$api.resourceCenterpost(this.$store.state.access_token, this.num, this.page)
				}).then(res => {
					this.resourcelist = res.values.records
					this.showList = res.values.records
				})
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.page += 1
				this.status = 'loading'
				this.$api.resourceCenterSearch(this.$store.state.access_token, this.searchObj, this.num, this.page)
					.then(res => {
						if (res.values.records.length === 0) {
							this.status = 'nomore'
						} else {
							res.values.records.forEach((item, index) => {
								this.showList.push(item)
							})
							this.status = 'loadmore'
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.dropwrap {
		width: 100%;
		height: 100%;

		.drop {
			background-color: white;
		}
	}

	.showpage {}

	.empty {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.search {
		box-sizing: border-box;
		padding: 10rpx 10rpx;
	}

	.sort-slot {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		width: 100%;

		.sort-name {
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.sort-btn {
				margin: 10rpx;
			}
		}

		.sort-type {

			display: flex;
			width: 100%;
			flex-wrap: nowrap;

			.sort-btn {
				margin: 10rpx;
			}

		}

		.close-btn {}
	}
</style>
